<template>
	<view class="mainPage" style="padding-top: 0">
		<view class="padding">
<!--			<view class="status-text">-->
<!--				请在{{ time }}分钟内完成支付，超时自动取消-->
<!--			</view>-->
<!--			<view class="progress bg-white margin-top radius-xl padding-sm margin-bottom">-->
<!--				<view class="item themeColor" :style="{ opacity: info.order_status >= 1 ? 1 : 0.5}">-->
<!--					<view class="image">-->
<!--						<image src="@/static/image/order/order_accept.png" mode=""></image>-->
<!--						<text class="text-sm">阿姨接单</text>-->
<!--					</view>-->
<!--				</view>-->
<!--        <view class="item themeColor" :style="{ opacity: info.order_status >= 1 ? 1 : 0.5}">-->
<!--					<view class="image">-->
<!--						<image src="@/static/image/order/order_go.png" mode=""></image>-->
<!--						<text class="text-sm">阿姨出发</text>-->
<!--					</view>-->
<!--				</view>-->
<!--        <view class="item themeColor" :style="{ opacity: info.order_status >= 2 ? 1 : 0.5}">-->
<!--					<view class="image">-->
<!--						<image src="@/static/image/order/order_arrive.png" mode=""></image>-->
<!--						<text class="text-sm">阿姨到达</text>-->
<!--					</view>-->
<!--				</view>-->
<!--        <view class="item themeColor" :style="{ opacity: info.order_status >= 2 ? 1 : 0.5}">-->
<!--					<view class="image">-->
<!--						<image src="@/static/image/order/order_start.png" mode=""></image>-->
<!--						<text class="text-sm">开始服务</text>-->
<!--					</view>-->
<!--				</view>-->
<!--        <view class="item themeColor" :style="{ opacity: info.order_status >= 3 ? 1 : 0.5}">-->
<!--					<view class="image">-->
<!--						<image src="@/static/image/order/order_end.png" mode=""></image>-->
<!--						<text class="text-sm">服务完成</text>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->

      <view class="address radius-xl padding-sm bg-white margin-bottom">
        <view class="icon">
          <image src="@/static/icon/address.png" mode=""></image>
        </view>
        <view class="info margin-left-sm" v-if="info.address.address">
          <view>
            <text class="text-black">{{info.address.nickname}}</text>
            <text class="padding-left-sm">{{info.address.phone}}</text>
          </view>
          <view>
            <text class="gray text-sm">{{info.address.address + info.address.code}}</text>
          </view>
        </view>
      </view>
			<!-- 预约项目 -->
			<view class="project-list padding-sm radius-xl bg-white margin-bottom-sm">
				<view class="solid-bottom">
					<view class="title">
						<text class="cuIcon-titles themeColor"></text>预约项目
					</view>
					<view @click="toProduct(item.goods.id)" class="project padding-tb-sm" v-for="(item,index) in info.orderDetails" :key="index">
						<image :src="item.good.image" mode="" class="image"></image>
						<view class="proBox padding-left-sm">
							<view class="nameandtime">
								<view class="name text-bold text-black">{{item.good.name}}</view>
								<view class="time text-gray text-sm">{{item.good.duration}}分钟</view>
							</view>
							<view class="desc text-sm text-gray margin-bottom-sm">{{item.good.desc}}</view>
							<view class="cost">
								<view class="text-red text-bold">￥{{item.good.price}}</view>
								<view class="num text-gray">x{{item.count}}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 延长服务 -->
				<view v-if="info.extendOrder && info.extendOrder.length > 0">
					<view class="addOrder padding-top-xs">
						<text class="cuIcon-titles themeColor"></text>延长项目
					</view>
					<view v-for="(item,index) in info.extendOrder" :key="index">
						<view class="project padding-tb-sm" v-for="(items,indexs) in item.projects" :key="indexs">
							<image :src="items.image.preview_url" mode="" class="image"></image>
							<view class="proBox padding-left-sm">
								<view class="nameandtime">
									<view class="name text-bold text-black">{{items.name}}</view>
									<view class="time text-gray text-sm">{{items.serve_hours}}分钟</view>
								</view>
								<view class="desc text-sm text-gray margin-bottom-sm">{{items.desc}}</view>
								<view class="cost">
									<view class="text-red text-bold">￥{{items.money}}</view>
									<view class="num text-gray">x{{items.num}}</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 订单明细 -->
			<view class="orderInfo padding-sm radius-xl bg-white margin-bottom">
				<view class="title margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>订单明细
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">项目金额</view>
					<view class="content">
						<text class="text-bold">¥ {{info.pay_amount - info.travel_mode_fee }}</text>
					</view>
				</view>
<!--				<view class="crow margin-bottom-sm text-sm">-->
<!--					<view class="name">延长金额</view>-->
<!--					<view class="content">-->
<!--						<text class="text-bold">¥ 889.90</text>-->
<!--					</view>-->
<!--				</view>-->
				<!-- <view class="crow margin-bottom-sm text-sm">
					<view class="name">出行费用</view>
					<view class="content">
						<text class="text-bold">¥ {{ info.travel_mode_fee}}</text>
					</view>
				</view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">车费详情</view>
					<view class="content">
						<text class="text-bold">{{ info.travel_mode_name}}</text>
						<text class="padding-left-xs">全程{{ info.totalkm || 0 }}km</text>
					</view>
				</view> -->
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">服务状态</view>
					<view class="content">
						<text class="text-bold">{{ orderStatusText }}</text>
					</view>
				</view>
				<!-- <view class="crow margin-bottom-sm text-sm">
					<view class="name">支付方式</view>
					<view class="content payType">
						<image src="@/static/image/order/wepay.png" mode="" class="payTypeImg"></image>
					</view>
				</view> -->
<!--				<view class="crow margin-bottom-sm text-sm" v-if="info.coupon_id > 0">-->
<!--					<view class="name">优惠金额</view>-->
<!--					<view class="content">-->
<!--						<text class="text-red text-bold">- ¥ {{info.coupon_money}}</text>-->
<!--					</view>-->
<!--				</view>-->
				<view class="crow margin-bottom-sm text-sm">
					<view class="name text-bold">支付金额</view>
					<view class="content">
						<text class="text-red text-bold">¥ {{info.pay_amount}}</text>
					</view>
				</view>
			</view>

			<!-- 订单详情 -->
			<view class="orderInfo padding-sm radius-xl bg-white">
				<view class="title margin-bottom-sm">
					<text class="cuIcon-titles themeColor"></text>订单信息
				</view>

        <view class="crow margin-bottom-sm text-sm">
          <view class="name">订单编号</view>
          <view class="content">
            <text class="text-bold">{{info.order_no}}</text>
          </view>
        </view>
        <view class="crow margin-bottom-sm text-sm">
          <view class="name">预约时间</view>
          <view class="content">
            <text class="text-bold">{{info.start_time}}</text>
          </view>
        </view>
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">服务阿姨</view>
					<view class="content" v-if="info.staff">
						<view class="cu-avatar sm round margin-left" :style="{backgroundImage: 'url('+info.staff.avatar+')'}"></view>
						<text class="padding-left-xs text-bold">{{info.staff.nickname}}</text>
					</view>
				</view>
        <view class="crow margin-bottom-sm text-sm" v-if="info.order_status >= 1">
          <view class="name">阿姨电话</view>
          <view class="content" v-if="info.staff" @click="openPhone">
            <text class="padding-left-xs text-bold">{{info.staff.phone}}</text>
          </view>
        </view>
<!--        <view class="crow margin-bottom-sm text-sm">-->
<!--          <view class="name">阿姨位置</view>-->
<!--          <view class="content" style="text-align: right" v-if="info.staff_address" @click="openMap">-->
<!--            <div v-if="info.staff_address.address_name">{{info.staff_address.address_name || ''}}</div>-->
<!--            <div v-if="info.staff_address.address">{{info.staff_address.address || ''}}</div>-->
<!--          </view>-->
<!--        </view>-->
				<view class="crow margin-bottom-sm text-sm">
					<view class="name">订单备注</view>
					<view class="content">
						<text class="text-bold">{{info.remark}}</text>
					</view>
				</view>
			</view>
		</view>

		<addOrder :show="addOrderShow" :orderId="info.order_id" @addOrderPopup="addOrderPopup"/>

		<Loading v-if="pageLoading"/>
	</view>
</template>

<script>
	import addOrder from './modules/addOrder.vue'; // 延长服务
	export default {
		components:{addOrder},
		data() {
			return {
				pageLoading:false,
				info: {
          staff_address: {},
          address: {},
          orderDetails: []
        },
				addOrderShow:false
			};
		},
    computed: {
      time() {
        // 根据创建时间倒推15分钟
        return 15;
      },
      orderStatusText() {
        const statusMap = {
          0: '待接单',
          1: '已接单',
          2: '服务中',
          3: '已完成',
          4: '已取消'
        };
        return statusMap[this.info.order_status] || '未知';
      }
    },
		onLoad(options) {
			this.pageLoading = true;
      this.$http.getOrderDetail({
        id: options.orderId
      }).then(res => {
        let staff_address = {}
        if (res.staff_address) {
          staff_address = JSON.parse(res.staff_address);
        }
        this.info = {
          ...res,
          address: JSON.parse(res.address),
          staff_address,
        };
        this.pageLoading = false;
      })
		},
		methods:{
      toProduct(id) {
        uni.navigateTo({
          url:'/pages/project/project?goodsId=' + id
        });
      },
      openMap() {
        const latitude = parseFloat(this.info.staff_address.latitude);
        const longitude = parseFloat(this.info.staff_address.longitude);
        const address = this.info.staff_address.address;
        const address_name = this.info.staff_address.address_name;

        uni.openLocation({
          name: address_name, // 位置名
          latitude: latitude, // 纬度
          longitude: longitude, // 经度
          address: address, // 地址的详细描述
          success() {
            console.log('地图打开成功');
          },
          fail(error) {
            console.error('地图打开失败', error);
          }
        });
      },
      openPhone() {
        uni.makePhoneCall({
          phoneNumber: this.info.staff.phone,
          success() {
            console.log('拨打电话成功');
          },
          fail(error) {
            console.error('拨打电话失败', error);
          }
        });
      },

			endOrder(){
				this.pageLoading = true;
			},
			addOrderPopup(e){
				this.addOrderShow = false;
			}
		}
	}
</script>

<style lang="less" scoped>
.progress{
	display: flex;
	justify-content: space-between;
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.image{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			image{
				width: 45upx;
				height: 45upx;
				margin-bottom: 10upx;
			}
		}

	}
}
.address{
	display: flex;
	align-items: center;
	.icon{
		image{
			width: 44upx;
			height: 44upx;
		}

	}
}
.crow .name {
  flex-shrink: 0;
}
.project-list{

	.project{
		display: flex;
		.image{
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}
		.proBox{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nameandtime,.cost{
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
.crow{
	justify-content:space-between
}
.step{
	display: flex;
	justify-content: flex-start;
	.content{
		margin-left:20upx
	}
}
.payType{
	display: flex;
	align-items: center;
	.payTypeImg{
		width: 40upx;
		height: 40upx;
	}
}
</style>
